<template>
  <v-content style="background-color: #f5f5f5">
    <div class='topcategory'>
      <div class='mw-row-style'
           style='z-index:97;justify-content:center;background-color:#ffffff;height:0.44rem;width:3.75rem;align-items:center;position: fixed;top:0;'>
        <div v-for="(item,index) in data.topcategory">
          <div @click="data.changeCategory(item.id)" class='mw-column-style'
               style='width:0.55rem;height:0.44rem;align-items:center;justify-content: center'>
            <div class="mw-single-line" :class="[item.checked? 'mw-checked' : 'mw-unchecked']"
                 style='z-index:1;width:0.5rem;text-align: center'>{{item.name}}
            </div>
            <div style="height:0.05rem;width:0.38rem;margin-top:-0.04rem"
                 :style="{backgroundColor:item.checked? '#ffc421' : '#ffffff'}"></div>
          </div>
        </div>
      </div>
    </div>
    <v-miaoScroll :on-refresh="data.onRefresh" :on-getmore="data.onGetmore" :has-next="data.has_next"
                  :showview="data.showview" v-vuet-scroll="{ path: 'orderlist', name: 'content' }"
                  style="margin-top:0.44rem;">
      <div class="mw-column-style" style="align-items: center;width: 100%;">
        <div @click="data.skipToDetail(item.id)" v-for="(item,index) in data.list" class="mw-column-style mw-main-background-white"
             style="margin-top:0.1rem;width: 3.35rem;padding:0.1rem;border-radius: 0.08rem;">
          <div class="mw-row-spacebetween-style" style="align-items: center;margin-bottom: 0.15rem">
            <div class="mw-first-text-color" style="font-size: 0.13rem">订单编号：{{item.order_sn}}</div>
            <div :style="{color:item.status == 0 || item.status == 1 ? '#ED3D5D':'#CCCCCC'}" style="font-size: 0.13rem">{{item.status_name}}</div>
          </div>
          <div class="mw-row-spacebetween-style" style="height:0.8rem">
            <img :src="item.products[0].goods_image" style="height:0.8rem;width: 0.8rem;object-fit: cover;"/>
            <div class="mw-column-style" style="height:100%;width: 2.45rem;justify-content: space-between">
              <div class="mw-single-line mw-first-text-color" style="font-size:0.15rem">{{item.products[0].goods_name}}</div>
              <div class="mw-single-line mw-third-text-color" style="font-size:0.13rem">{{item.products[0].product_name}}</div>
              <div class="mw-single-line mw-first-text-color" style="font-size:0.17rem;font-weight: bold">￥{{item.products[0].product_price}}</div>
            </div>
          </div>
        </div>
      </div>
    </v-miaoScroll>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'orderlist'}),
      mapRules({store: [{path: 'orderlist'}], need: [{path: 'orderlist'}]}),
    ],
    components: {},
    data() {
      return {}
    },
    methods: {

    },

    created() {

    },

    mounted() {
      this.data.needFetch = true
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .topcategory {
    z-index: 99;
    position: fixed;
    top: 0;
    width: 3.75rem;
    overflow-x: scroll;
    background-color: #ffffff;
    height: 0.44rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.04);
  }

  .topcategory::-webkit-scrollbar {
    display: none;
  }

  .mw-checked {
    color: #333333;
    font-weight: bold;
    font-size: 0.13rem;
    line-height: 1.5;
  }

  .mw-unchecked {
    color: #999999;
    font-size: 0.13rem;
    line-height: 1.5;
  }

</style>
